<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      a {
        display: block;
      }
      .split-border {
        display: block;
        border-bottom: 1px dashed black;
        padding-bottom: 10px;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
  <div>
    <h3>苹果官网：</h3>
    <a href="apple/text-cloumn-transtion-show.html">
      苹果官网系列之css拖动显示文字
    </a>
    <span class="split-border"></span>
  </div>

  <div>
    <h3>ios系列：</h3>
    <a href="ios/ios-type-switch.html">ios系列之css画开关</a>
    <a href="ios/ios-phone-type-select.html">ios系列之手机端css画下拉条</a>
    <span class="split-border"></span>
  </div>

  <div>
    <h3>轮播图：</h3>
    <a href="carousel/level1.html" target="_blank">纯CSS轮播图 - Level 1</a>
    <a href="carousel/level2.html" target="_blank">纯CSS轮播图 - Level 2</a>
    <span class="split-border"></span>
  </div>

  <div>
    <h3>动画效果：</h3>
    <h4>文字动画：</h4>
    <a href="animation/text/typing-effects.html" target="_blank">css打字动效</a>
    <a href="animation/text/sketch-webside-title.html" target="_blank">
      css之sketch官网title动效
    </a>
    <h4>卡片效果：</h4>
    <a href="animation/card/replace-card.html" target="_blank">css翻转卡片</a>
    <span class="split-border"></span>
  </div>





  </body>
</html>
